<template>
	<view class="page-my-student">
		<MxMyStudentCard class="cmp-my-student-card" v-for="course in courseList" :course="course" />
		<EmptyData v-if="!hasStudent" />
	</view>
</template>

<script>
	import MxMyStudentCard from '@/components/mine/my-student/MxMyStudentCard.vue';
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as userApi from '@/api/user.js'
	
	export default {
		components: {
			MxMyStudentCard,
			EmptyData
		},
		data() {
			return {
				courseList: []
			};
		},
		computed: {
			hasStudent() {
				return this.courseList.length !== 0
			}
		},
		onShow() {
			userApi.courseStudents().then(res => {
				console.log(res)
				this.courseList = res.data
			})
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/mixins.scss';
@import '@/common/scss/var.scss';
page{
	background-color: $page-bg-color;
}
.page-my-student{
	box-sizing: border-box;
	width: 100%;
	padding: 0 24rpx;
	padding-top: 64rpx;
	
	.cmp-my-student-card{
		margin-bottom: 36rpx;
	}
}
</style>
